<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>点名系统</title>
  <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/easyui/css/demo.css}">
  <script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
  <script type="text/javascript" th:src="@{/easyui/js/validateExtends.js}"></script>

</head>
<body>
<h2>点名系统</h2>

<div th:if="${session.usertype == '3'}"> <!-- 教师 -->
  <h3>发布点名</h3>
  <form id="createCallingForm">
    <div>
      <label>班级 ID:</label>
      <input name="classId" class="easyui-numberbox" required="true"><br>
      <label>教师 ID:</label>
      <input name="teacherId" class="easyui-numberbox" required="true"><br>
      <label>开始时间:</label>
      <input name="startTime" class="easyui-datetimebox" required="true"><br>
      <label>结束时间:</label>
      <input name="endTime" class="easyui-datetimebox" required="true"><br>
    </div>
    <div style="text-align:center;margin-top:20px">
      <button href="javascript:void(0)" class="easyui-linkbutton" onclick="submitCreateCalling()">发布</button>
    </div>
  </form>

  <h3>学生签到情况</h3>
  <table id="attendanceTable" title="学生签到情况" class="easyui-datagrid" style="width:600px;height:400px"
         url="/attendance/getStudentAttendance" pagination="true" rownumbers="true" singleSelect="true">
    <thead>
    <tr>
      <th field="studentId" width="50">学生 ID</th>
      <th field="studentName" width="50">学生姓名</th>
      <th field="status" width="50">签到状态</th>
    </tr>
    </thead>
  </table>
</div>

<div th:if="${session.usertype == '2'}"> <!-- 学生 -->
  <h3>签到提示</h3>
  <p>请确认您参加的点名，然后点击确认点名按钮。</p>
  <div style="text-align:center;margin-top:20px">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="confirmAttendance()">确认点名</a>
  </div>
</div>

<script type="text/javascript">
  var studentData = [
    {"studentId": 1, "studentName": "张三", "status": "已签到"},
    {"studentId": 2, "studentName": "李四", "status": "未签到"}
  ];

  // 初始化 DataGrid
  $(document).ready(function() {
    $('#attendanceTable').datagrid({
      data: studentData // 将数据直接填充到表格中
    });
  });
  function submitCreateCalling() {
    $('#createCallingForm').form('submit', {
      url: '/calling/createCalling',
      onSubmit: function() {
        return $(this).form('validate');
      },
      success: function(result) {
        if (result.success) {
          alert('点名发布成功！');
          $('#attendanceTable').datagrid('reload'); // 重新加载学生签到情况
        } else {
          alert('点名发布失败！' + result.message);
        }
      }
    });
  }

  function confirmAttendance() {
    $.ajax({
      type: "post",
      url: '/attendance/confirm',
      data: { studentId: 1/* 用户的学生 ID */ },
      dataType: "json",
      success: function(data) {
        if (data.success) {
          alert('签到成功！');
        } else {
          alert('签到失败！' + data.message);
        }
      }
    });
  }
</script>
</body>
</html>